<template>
	<!-- <u-sticky bgColor="#fff" zIndex="11110" style="margin-bottom: 100rpx;"> -->
	<view style="position: relative; height: 100rpx;background-color: #fff;">
		<view class="search-box">
			<u--input :customStyle="{backgroundColor: '#F3F4F6', border: 'none'}" shape="circle"
				:placeholder="placeholder" border="surround" v-model="keyword" prefixIcon="search"
				prefixIconStyle="font-size: 22px;color: #909399" @change="inputChange" fontSize="24rpx"
				@confirm="inputConfirm"
				>
			</u--input>
			<view class="icon-box" :class="{ 'act-icon-box': filtersVisible }" v-if="filterGroup" @click="clickFilter">
				<u-icon v-if="!filtersVisible" name="https://pc.chinaonebuild.com/images/unact-filter.png" height="30rpx"
					width="32rpx"></u-icon>
				<u-icon v-else name="https://pc.chinaonebuild.com/images/act-filter.png" height="28rpx" width="30rpx">
				</u-icon>
				<view>筛选</view>
			</view>
		</view>

		<u-popup @close="filtersVisible = false" :show="filtersVisible" mode="top" :overlayStyle="{ top: heights }"
			:customStyle="{ top: heights }" class="upopup">
			<view :style="{marginTop: filterpopMtop+'rpx'}">
				<slot></slot>
			</view>

			<view style="display: flex;padding: 0 30rpx;">
				<u-button text="重置" @click="reset"></u-button>
				<u-button text="确定" type="primary" @click="confirm" style="margin-left: 10rpx;"></u-button>
			</view>
		</u-popup>

	</view>
	<!-- </u-sticky> -->

</template>

<script>
	export default {
		name: "Search",
		props: {
			heights: {
				type: String,
				default: '185rpx'
			},
			value: {
				type: String,
				defualt: ''
			},
			placeholder: {
				type: String,
				default: "请输入内容进行搜索"
			},
			//使用弹窗时，需要将u-navbar的z-index设为11110（.u-navbar--fixed）
			filterGroup: {
				type: Boolean,
				default: false
			},
			// 设置弹出层上外边距
			filterpopMtop: {
				type: Number,
				default: 89
			}
		},
		data() {
			return {
				filtersVisible: false,
			}
		},
		computed: {
			keyword: {
				get() {
					return this.value
				},
				set(newVal) {
					this.$emit('input', newVal)
				}
			}
		},
		methods: {
			reset() {
				this.filtersVisible = false
				this.$emit('reset')
			},
			confirm() {
				this.filtersVisible = false
				this.$emit('confirm')
			},
			inputChange(v) {
				this.$emit('change', v)
			},
			clickFilter() {
				this.filtersVisible = !this.filtersVisible
			},
			inputConfirm(){
				this.$emit('inputConfirm')
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-popup__content {
		max-height: 900rpx;
		overflow: hidden;
		overflow-y: auto;
		top:225rpx !important;
	}

	.search-box {
		margin-bottom: 24rpx;
		display: flex;
		padding: 18rpx 20rpx;
		padding-bottom: 0;
		width: 100%;
		z-index: 11121;
		position: absolute;
		left: 0;
		right: 0;
		background-color: #fff;
		box-sizing: border-box;

		.icon-box {
			margin-top: 10rpx;
			margin-left: 22rpx;
			width: 50rpx;
			text-align: left;
			font-size: 20rpx;
		}

		.act-icon-box {
			color: #2289FF;
		}
	}

	::v-deep .u-icon--right {
		justify-content: center;
	}
</style>
